<template>
	<view>
		<view class="editAddress">
			<div class="address-box1">
				<!-- 表单信息 -->
				<u--form labelPosition="left" :model="form" ref="uForm">
					<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
						<u--input v-model="form.namePer" border="none"></u--input>
					</u-form-item>
					<u-form-item label="电话" prop="userInfo.name" borderBottom ref="item1">
						<u--input v-model="form.phonePer" border="none"></u--input>
					</u-form-item>
				</u--form>
			</div>
			<div class="address-box2">
				<div style="width:33.3vw" @click="showClick">
					<u-picker :show="show" @cancel="cancel" :columns="aa" @confirm="confirm"></u-picker>
					<span class="areaName">一级区域</span>
				</div>
				<div style="width:33.3vw">
					<u-picker :show="show1" @cancel="cancel" :columns="bb" @confirm="confirm1"></u-picker>
					<span class="areaName">二级区域</span>
				</div>
				<div style="width:33.3vw">
					<u-picker :show="show2" @cancel="cancel" :columns="cc" @confirm="confirm2"></u-picker>
					<span class="areaName1">三级区域</span>
				</div>
			</div>
			<!-- <div style="width: 60vw;margin:0 auto;">{{areaStr}}</div> -->
			<div class="addressText">
				<div style="font-size: 26rpx;">地址:</div>
				<div style="font-size: 26rpx;">{{areaStr}}</div>
			</div>
			<div class="addressBtn">
				<u-button type="primary" text="确定" @click="edit"></u-button>
			</div>
		</view>
	</view>
</template>

<script>
	import {
		getArea,
		guard
	} from "@/ww.js"
	export default {
		data() {
			return {
				form: {},
				show: false,
				show1: false,
				show2: false,
				aa: [
					['1', '2']
				],
				bb: [
					['2', '3']
				],
				cc: [
					[]
				],
				areaStr: '',
				arr: [],
				areaArr: [], //地址信息
				pid: '',
			}
		},
		async onLoad(options) {
			guard('../../login/login')
			this.form = JSON.parse(decodeURIComponent(options.item))
			console.log(this.form, 'form')
			this.areaStr = this.form.areaPer
			const data = await getArea()
			this.arr = data.data
		},
		methods: {
			showClick() {
				// 清空
				this.clear()
				let newArray = []
				this.arr.forEach(ele => {
					if (ele.pid == "0") {
						newArray.push(ele.areaName)
					}
				})
				this.aa[0] = newArray
				this.show = true
			},
			confirm(e) {
				this.show = false
				this.areaArr.push(e.value[0])
				let newArray = []
				this.arr.forEach((el => {
					if (el.areaName == e.value[0]) {
						this.pid = el.id
					}
				}))
				this.arr.forEach(ele => {
					if (ele.pid == this.pid) {
						newArray.push(ele.areaName)
					}
				})

				this.$nextTick(() => {
					this.$set(this.bb, 0, newArray)
					this.show1 = true
				})
			},
			confirm1(e) {
				this.show1 = false
				let newArray = []
				this.areaArr.push(e.value[0])
				this.arr.forEach((el => {
					if (el.areaName == e.value[0]) {
						this.pid = el.id
					}
				}))
				this.arr.forEach(ele => {
					if (ele.pid == this.pid) {
						newArray.push(ele.areaName)
					}
				})
				this.$nextTick(() => {
					this.$set(this.cc, 0, newArray)
					this.show2 = true
				})
			},
			confirm2(e) {
				this.areaArr.push(e.value[0])
				this.areaArr.forEach((ele, i) => {
					if (i == this.areaArr.length - 1) {
						this.areaStr += ele
					} else {
						this.areaStr += ele + "-"
					}
				})
				this.show2 = false
			},
			//clear清空
			clear() {
				this.areaArr = []
				this.show = false
				this.show1 = false
				this.show2 = false
				this.aa = [
					[]
				]
				this.bb = [
					[]
				]
				this.cc = [
					[]
				]
				this.areaStr = ''
			},
			cancel() {
				this.clear()
			},
			// 编辑
			edit() {
				this.form.areaPer = this.areaStr
				console.log(this.form)
				uni.request({
					url: 'http://111.231.22.97:9000/updateAreaPerson',
					method: "POST",
					header: {
						"Authorization": uni.getStorageSync('token').token,
					},
					data: this.form,
					success: (res) => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '修改成功',
								icon: "success",
								duration: 1000
							})
							let pages = getCurrentPages(); //获取页面栈
							let prevPage = pages[pages.length - 2]; //上一个页面
							let number = new Date().getTime()
							prevPage.$vm.resInfo = number
							console.log(prevPage, 'kkll')
							setTimeout(() => {
								uni.navigateBack({
									delta: -1
								})
							}, 1000)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-box2 {
		width: 60vw;
		display: flex;
		margin: 3.5vw auto;
		background: #00bfff;
		border-radius: 10px;

		.areaName {
			width: 100%;
			display: flex;
			justify-content: center;
			font-size: 30rpx;
			border-right: 1px dashed #fff;
			color: #fff;
		}

		.areaName1 {
			width: 100%;
			display: flex;
			justify-content: center;
			font-size: 30rpx;
			color: #fff;
		}

		&>div {
			padding: 8rpx 0;
		}
	}

	.address-box1 {
		width: 60vw;
		margin: 0 auto;
	}

	.editAddress {
		width: 80vw;
		margin: 5vw auto;
		background-color: #fff;
		border-radius: 15rpx;
		box-shadow: 0px 5px 10px #888888;
	}


	::v-deep .address-box1 .u-form-item__body__left__content__label.data-v-067e4733 {
		font-size: 26rpx !important;
	}

	::v-deep .u-input__content__field-wrapper__field.data-v-113bc24f {
		font-size: 28rpx !important;
	}

	.addressText {
		width: 60vw;
		margin: 0 auto;
		display: flex;
		padding: 0 0 2vw 0;
	}

	.addressBtn {
		width: 50%;
		margin: 0 auto;
		padding: 1vh 0;
	}

	::v-deep .addressBtn .u-button--primary.data-v-2bf0e569 {
		height: 4vh !important;
		background: #00bfff;
		border: #00bfff;
	}

	.u-button {
		background: #00bfff;
		border: #00bfff;
	}
</style>